<template>
  <a :style="styleObject">
    <slot>BUTTON NAME</slot>{{msg}}
  </a>
</template>

<script>
export default {
  props: {
    sty: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      styleObject: {
        width: this.sty.match(/w(\d+)/) !== null ? 
          this.sty.match(/w(\d+)/)[1] + 'px' : 
          300 + 'px', 
        height: this.sty.match(/h(\d+)/) !== null ? 
          this.sty.match(/h(\d+)/)[1] + 'px' : 
          54 + 'px',
        'line-height': this.sty.match(/h(\d+)/) !== null ? 
          this.sty.match(/h(\d+)/)[1] + 'px' : 
          54 + 'px',
        'margin-right': this.sty.match(/mr(\d+)/) !== null ? 
          this.sty.match(/mr(\d+)/)[1] + 'px' : 
          0 + 'px'
      }
    }
  },
  computed: {
    msg(){
      if (this.sty === '') {
        return 'default 300x54'
      }else{
        return ''
      }
    }
  }
}
</script>

<style lang="stylus">

</style>